<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Page title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<link href="lib/view.css" rel="stylesheet" />

<link href="lib/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="lib/font-awesome/4.7.0/css/font-awesome.min.css"
	rel="stylesheet" />
<script src="lib/jquery/3.1.1/jquery.min.js"></script>
<script src="lib/echarts.min.js"></script>

<script src="lib/control.js"></script>

</head>

<body style="background-color:#DDDDDD">
	<div class="container"
		style="background-color: #33b5e5; width: 100%; height: 200px; ">
		<div style="margin-top:60px;text-align:center">
		<div class="container box2">
		<form name="form-compare" class="form-inline" role="form">
			<div class="form-group">
				<input name="begin-N" type="text" class="form-control"
					style="width: 17%" placeholder="" /> <i
					class="fa fa-long-arrow-right"></i> <input name="end-N" type="text"
					class="form-control" style="width: 17%" placeholder="" />
				<button type="button" class="btn btn-primary" id="compare">
					<i class="fa fa-area-chart">比较</i>
				</button>
				<button type="button" class="btn btn-primary" id="compare-auto">
					<i class="fa fa-play" id="spin-auto"></i>自动
				</button>
				<button type="button" class="btn btn-primary" id="compare-repeat">
					<i class="fa fa-repeat">重置</i>
				</button>
			</div>
		</form>
		</div>
		</div>
	
	</div>
	<div class="container">
		<div class="row">
			<div class="container col-sm-60">
				<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
				<div id="chart" style="width: 100%; height: 600px;"></div>
			</div>
			<div class="container col-sm-60" style="min-height:267px;">
					<table class="table table-striped">
						<caption>时间数据表</caption>
						<thead>
							<tr>
								<th>元素个数</th>
								<th>序数法</th>
								<th>字典序法</th>
								<th>换位法</th>
							</tr>
						</thead>
						<tbody id="time-table" >
						</tbody>
					</table>
				</div>
				
				<div class="container col-sm-60" style="min-height:267px;">
					<table class="table table-striped">
						<caption>baseop</caption>
						<thead>
							<tr>
								<th>元素个数</th>
								<th>序数法</th>
								<th>字典序法</th>
								<th>换位法</th>
							</tr>
						</thead>
						<tbody id="op-table" >
						</tbody>
					</table>
				</div>
		</div>
	</div>	
	<div class="footer"></div>
	<script>
	var myChart = echarts.init(document.getElementById('chart'));

	// 指定图表的配置项和数据
	option = {
		title : {
			text : '效率分析图',
			subtext : ''
		},
		tooltip : {
			trigger : 'axis'
		},
		legend : {
			data : [ '序数法','字典序法', '换位法' ]
		},
		toolbox : {
			show : true,
			feature : {
				dataZoom : {
					yAxisIndex : 'none'
				},
				dataView : {
					readOnly : false
				},
				magicType : {
					type : [ 'line', 'bar' ]
				},
				restore : {},
				saveAsImage : {}
			}
		},
		xAxis : {
			type : 'category',
			boundaryGap : false,
			data : [0,0,0,0,0]
		},
		yAxis : {
			type : 'value',
			axisLabel : {
				formatter : '{value} ns'
			}
		},
		series : [ {
			name : '序数法',
			type : 'line',
			data : [0,0,0,0,0],
		},{
			name : '字典序法',
			type : 'line',
			data : [0,0,0,0,0],
		}, {
			name : '换位法',
			type : 'line',
			data : [0,0,0,0,0],
			markPoint : {
				data : [ {
					name : '周最低',
					value : -2,
					xAxis : 1,
					yAxis : -1.5
				} ]
			},
		} ]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
	
	//-----------------------------
	$(document).ready(function(){
		
	});
	</script>
</body>
</html>
